<template><div>
    <div class="content__inner">
        <header class="content__title">
            <h1>Form Components</h1>

            <div class="actions">
                <a href="" class="actions__item zmdi zmdi-trending-up"></a>
                <a href="" class="actions__item zmdi zmdi-check-all"></a>

                <div class="dropdown actions__item">
                    <i data-toggle="dropdown" class="zmdi zmdi-more-vert"></i>
                    <div class="dropdown-menu dropdown-menu-right">
                        <a href="" class="dropdown-item">Refresh</a>
                        <a href="" class="dropdown-item">Manage Widgets</a>
                        <a href="" class="dropdown-item">Settings</a>
                    </div>
                </div>
            </div>
        </header>

        <div class="card">
            <div class="card-header">
                <h2 class="card-title">Input group</h2>
                <small class="card-subtitle">Easily extend form controls by adding text, buttons, or button groups on either side of textual <code>&lt;input&gt;</code>s.</small>
            </div>

            <div class="card-block">
                <h3 class="card-block__title">Basic example</h3>
                <p>Place one add-on or button on either side of an input. You may also place one on both sides of an input.</p>

                <br/>

                <div class="row">
                    <div class="col-sm-6">
                        <div class="input-group">
                            <span class="input-group-addon">@</span>
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="Username"/>
                                <i class="form-group__bar"></i>
                            </div>
                        </div>

                        <br/>

                        <div class="input-group">
                            <span class="input-group-addon">https://example.com/users/</span>
                            <div class="form-group">
                                <input type="text" class="form-control"/>
                                <i class="form-group__bar"></i>
                            </div>
                        </div>

                        <br/>

                        <div class="input-group">
                            <span class="input-group-addon">$</span>
                            <span class="input-group-addon">0.00</span>
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="Discounted price"/>
                                <i class="form-group__bar"></i>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-6">
                        <div class="input-group">
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="Recipient&#39;s username"/>
                                <i class="form-group__bar"></i>
                            </div>
                            <span class="input-group-addon">@example.com</span>
                        </div>

                        <br/>

                        <div class="input-group">
                            <span class="input-group-addon">$</span>
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="Enter amount"/>
                                <i class="form-group__bar"></i>
                            </div>
                            <span class="input-group-addon">.00</span>
                        </div>
                    </div>
                </div>

                <br/>
                <br/>

                <h3 class="card-block__title">Sizing</h3>
                <p>Add the relative form sizing classes to the <code>.input-group</code> itself and contents within will automatically resize. No need for repeating the form control size classes on each element.</p>

                <br/>

                <div class="input-group input-group-lg">
                    <span class="input-group-addon">@</span>
                    <span class="input-group-addon">@</span>
                    <span class="input-group-addon">@</span>
                    <div class="form-group">
                        <input type="text" class="form-control form-control-lg" placeholder="Large"/>
                        <i class="form-group__bar"></i>
                    </div>
                    <span class="input-group-addon">@</span>
                    <span class="input-group-addon">@</span>
                    <span class="input-group-addon">@</span>
                </div>

                <br/>

                <div class="input-group">
                    <span class="input-group-addon">@</span>
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Default"/>
                        <i class="form-group__bar"></i>
                    </div>
                </div>

                <br/>

                <div class="input-group input-group-sm">
                    <span class="input-group-addon">@</span>
                    <div class="form-group">
                        <input type="text" class="form-control form-control-sm" placeholder="Small"/>
                        <i class="form-group__bar"></i>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <h2 class="card-title">Input Test Masking</h2>
                <small class="card-subtitle">Angular 2 directive for input text masking</small>
            </div>

            <div class="card-block">
                <div class="row">
                    <div class="col-sm-3">
                        <div class="form-group">
                            <label>Date</label>
                            <input type="text" class="form-control input-mask" data-mask="00/00/0000" placeholder="eg: 23/05/2014"/>
                            <i class="form-group__bar"></i>
                        </div>
                    </div>

                    <div class="col-sm-3">
                        <div class="form-group">
                            <label>Time</label>
                            <input type="text" class="form-control input-mask" data-mask="00:00:00" placeholder="eg: 23:06:55"/>
                            <i class="form-group__bar"></i>
                        </div>
                    </div>

                    <div class="col-sm-3">
                        <div class="form-group">
                            <label>Date Time</label>
                            <input type="text" class="form-control input-mask" data-mask="00/00/0000 00:00:00" placeholder="eg: 00/00/0000 00:00:00"/>
                            <i class="form-group__bar"></i>
                        </div>
                    </div>

                    <div class="col-sm-3">
                        <div class="form-group">
                            <label>CEP</label>
                            <input type="text" class="form-control input-mask" data-mask="00000-000" placeholder="eg: 00000-000"/>
                            <i class="form-group__bar"></i>
                        </div>
                    </div>

                    <div class="col-sm-3">
                        <div class="form-group">
                            <label>Phone Number</label>
                            <input type="text" class="form-control input-mask" data-mask="000-00-0000000" placeholder="eg: 000-00-0000000"/>
                            <i class="form-group__bar"></i>
                        </div>
                    </div>

                    <div class="col-sm-3">
                        <div class="form-group">
                            <label>Phone with Odd</label>
                            <input type="text" class="form-control input-mask" data-mask="(00) 0000-0000" placeholder="eg: (00) 0000-0000"/>
                            <i class="form-group__bar"></i>
                        </div>
                    </div>

                    <div class="col-sm-3">
                        <div class="form-group">
                            <label>US Phone Number</label>
                            <input type="text" class="form-control input-mask" data-mask="(000) 000-0000" placeholder="eg: (000) 000-0000"/>
                            <i class="form-group__bar"></i>
                        </div>
                    </div>

                    <div class="col-sm-3">
                        <div class="form-group">
                            <label>CPF</label>
                            <input type="text" class="form-control input-mask" data-mask="000.000.000-00" placeholder="eg: 000.000.000-00"/>
                            <i class="form-group__bar"></i>
                        </div>
                    </div>

                    <div class="col-sm-3">
                        <div class="form-group">
                            <label>Money</label>
                            <input type="text" class="form-control input-mask" data-mask="000.000.000.000.000,00" placeholder="eg: 000.000.000.000.000,00"/>
                            <i class="form-group__bar"></i>
                        </div>
                    </div>

                    <div class="col-sm-3 m-b-20">
                        <div class="form-group">
                            <label>IP Address</label>
                            <input type="text" class="form-control input-mask" data-mask="000.000.000.000" placeholder="eg: 000.000.000.000"/>
                            <i class="form-group__bar"></i>
                        </div>
                    </div>

                    <div class="col-sm-3">
                        <div class="form-group">
                            <label>Percentage</label>
                            <input type="text" class="form-control input-mask" data-mask="00000,00%" placeholder="eg: 00000,00%"/>
                            <i class="form-group__bar"></i>
                        </div>
                    </div>

                    <div class="col-sm-3">
                        <div class="form-group">
                            <label>Credit Card</label>
                            <input type="text" class="form-control input-mask" data-mask="0000 0000 0000 0000" placeholder="eg: 0000 0000 0000 0000"/>
                            <i class="form-group__bar"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <h2 class="card-title">Select 2</h2>
                <small class="card-subtitle">Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.</small>
            </div>

            <div class="card-block">
                <div class="row">
                    <div class="col-sm-6 col-md-4">
                        <div class="form-group">
                            <label>Basic Example - Single Select</label>

                            <select class="select2">
                                <option>Subaru</option>
                                <option>Mitsubishi</option>
                                <option>Scion</option>
                                <option>Daihatsu</option>
                                <option>Hino</option>
                            </select>
                        </div>
                    </div>

                    <div class="col-sm-6 col-md-4">
                        <div class="form-group">
                            <label>Placeholder Text</label>

                            <select class="select2" data-placeholder="Select a brand">
                                <option> </option>
                                <option>Subaru</option>
                                <option>Mitsubishi</option>
                                <option>Scion</option>
                                <option>Daihatsu</option>
                                <option>Hino</option>
                            </select>
                        </div>
                    </div>

                    <div class="col-sm-6 col-md-4">
                        <div class="form-group">
                            <label>Disabled Select</label>

                            <select class="select2" data-placeholder="This one is disabled" disabled="">
                                <option> </option>
                                <option>Subaru</option>
                                <option>Mitsubishi</option>
                                <option>Scion</option>
                                <option>Daihatsu</option>
                                <option>Hino</option>
                            </select>
                        </div>
                    </div>

                    <div class="col-sm-6 col-md-4">
                        <div class="form-group">
                            <label>Disabled Results</label>

                            <select class="select2">
                                <option>Subaru</option>
                                <option>Mitsubishi</option>
                                <option disabled="">Scion</option>
                                <option disabled="">Daihatsu</option>
                                <option>Hino</option>
                            </select>
                        </div>
                    </div>

                    <div class="col-sm-6 col-md-4">
                        <div class="form-group">
                            <label>Hide Search Box</label>

                            <select class="select2" data-minimum-results-for-search="Infinity">
                                <option>Subaru</option>
                                <option>Mitsubishi</option>
                                <option disabled="">Scion</option>
                                <option disabled="">Daihatsu</option>
                                <option>Hino</option>
                            </select>
                        </div>
                    </div>

                    <div class="col-sm-6 col-md-4">
                        <div class="form-group">
                            <label>Multiple</label>

                            <select class="select2" multiple="" data-placeholder="Select one or more choices">
                                <option>Subaru</option>
                                <option>Mitsubishi</option>
                                <option>Scion</option>
                                <option>Daihatsu</option>
                                <option>Hino</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <h2 class="card-title">Drag and drop file upload</h2>
                <small class="card-subtitle">DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews.</small>
            </div>

            <div class="card-block">
                <form class="dropzone" id="dropzone-upload"></form>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <h2 class="card-title">Toggle Switch</h2>
                <small class="card-subtitle">Material design look alike Toggle Switches based on Radio Boxes</small>
            </div>
            <div class="card-block">
                <div class="row">
                    <div class="col-sm-4 col-md-3">
                        <h3 class="card-block__title">Basic Example</h3>

                        <br/>

                        <div class="form-group">
                            <div class="toggle-switch">
                                <input type="checkbox" class="toggle-switch__checkbox"/>
                                <i class="toggle-switch__helper"></i>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-4 col-md-3">
                        <h3 class="card-block__title">Active State</h3>

                        <br/>

                        <div class="form-group">
                            <div class="toggle-switch">
                                <input type="checkbox" class="toggle-switch__checkbox" checked=""/>
                                <i class="toggle-switch__helper"></i>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-4 col-md-3">
                        <h3 class="card-block__title">Disabled</h3>

                        <br/>

                        <div class="form-group">
                            <div class="toggle-switch">
                                <input type="checkbox" class="toggle-switch__checkbox" disabled=""/>
                                <i class="toggle-switch__helper"></i>
                            </div>
                        </div>
                    </div>
                </div>

                <h3 class="card-block__title">Color variants</h3>
                <p>Optional color variants can be added using modifier classes</p>

                <br/>

                <div class="demo-inline-wrapper">
                    <div class="form-group">
                        <div class="toggle-switch toggle-switch--red">
                            <input type="checkbox" class="toggle-switch__checkbox"/>
                            <i class="toggle-switch__helper"></i>
                        </div>
                    </div>
                </div>
                <div class="demo-inline-wrapper">
                    <div class="form-group">
                        <div class="toggle-switch toggle-switch--blue">
                            <input type="checkbox" class="toggle-switch__checkbox"/>
                            <i class="toggle-switch__helper"></i>
                        </div>
                    </div>
                </div>
                <div class="demo-inline-wrapper">
                    <div class="form-group">
                        <div class="toggle-switch toggle-switch--green">
                            <input type="checkbox" class="toggle-switch__checkbox"/>
                            <i class="toggle-switch__helper"></i>
                        </div>
                    </div>
                </div>
                <div class="demo-inline-wrapper">
                    <div class="form-group">
                        <div class="toggle-switch toggle-switch--cyan">
                            <input type="checkbox" class="toggle-switch__checkbox"/>
                            <i class="toggle-switch__helper"></i>
                        </div>
                    </div>
                </div>
                <div class="demo-inline-wrapper">
                    <div class="form-group">
                        <div class="toggle-switch toggle-switch--purple">
                            <input type="checkbox" class="toggle-switch__checkbox"/>
                            <i class="toggle-switch__helper"></i>
                        </div>
                    </div>
                </div>
                <div class="demo-inline-wrapper">
                    <div class="form-group">
                        <div class="toggle-switch toggle-switch--amber">
                            <input type="checkbox" class="toggle-switch__checkbox"/>
                            <i class="toggle-switch__helper"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <h2 class="card-title">Date Time Picker</h2>
                <small class="card-subtitle">Flatpickr is a lightweight and powerful datetime picker.</small>
            </div>

            <div class="card-block">

                <div class="row">
                    <div class="col-sm-4">
                        <label>Date and time picker</label>

                        <div class="input-group">
                            <span class="input-group-addon"><i class="zmdi zmdi-calendar"></i></span>
                            <div class="form-group">
                                <input type="text" class="form-control datetime-picker" placeholder="Pick a date &amp; time"/>
                                <i class="form-group__bar"></i>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-4">
                        <label>Date picker</label>

                        <div class="input-group">
                            <span class="input-group-addon"><i class="zmdi zmdi-calendar"></i></span>
                            <div class="form-group">
                                <input type="text" class="form-control date-picker" placeholder="Pick a date"/>
                                <i class="form-group__bar"></i>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-4">
                        <label>Time picker</label>

                        <div class="input-group">
                            <span class="input-group-addon"><i class="zmdi zmdi-calendar"></i></span>
                            <div class="form-group">
                                <input type="text" class="form-control time-picker" placeholder="Pick a time"/>
                                <i class="form-group__bar"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <h2 class="card-title">Color Picker</h2>
                <small class="card-subtitle">Simple color picker based on jQuery and Bootstrap.</small>
            </div>

            <div class="card-block">
                <div class="row">
                    <div class="col-sm-4">
                        <label>Basic example</label>

                        <div class="input-group">

                            <span class="input-group-addon"><i class="zmdi zmdi-invert-colors"></i></span>

                            <div class="form-group color-picker">
                                <input type="text" class="form-control color-picker__value" value="#03A9F4"/>
                                <i class="color-picker__preview" style="background-color: #03A9F4"></i>

                                <i class="form-group__bar"></i>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-4">
                        <label>Horizontal mode</label>

                        <div class="input-group">
                            <span class="input-group-addon"><i class="zmdi zmdi-invert-colors"></i></span>

                            <div class="form-group color-picker">
                                <input type="text" class="form-control color-picker__value" value="#cccccc" data-horizontal="true"/>
                                <i class="color-picker__preview" style="background-color: #cccccc"></i>

                                <i class="form-group__bar"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <h2 class="card-title">Input Sliders</h2>
                <small class="card-subtitle">noUiSlider is a lightweight JavaScript range slider with tons of customizaion.</small>
            </div>

            <div class="card-block">
                <div class="row">
                    <div class="col-md-6">
                        <h3 class="card-block__title">Single slider</h3>

                        <div id="input-slider"></div>

                        <div class="row">
                            <div class="col-6">
                                <div class="form-group">
                                    <input type="text" class="form-control" id="input-slider-value"/>
                                    <i class="form-group__bar"></i>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <h3 class="card-block__title">Range Slider</h3>

                        <div id="input-slider-range"></div>

                        <div class="row">
                            <div class="col-6">
                                <div class="form-group">
                                    <input type="text" class="form-control" id="input-slider-range-value-1"/>
                                    <i class="form-group__bar"></i>
                                </div>
                            </div>

                            <div class="col-6">
                                <div class="form-group">
                                    <input type="text" class="form-control" id="input-slider-range-value-2"/>
                                    <i class="form-group__bar"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <br/>
                <br/>

                <h3 class="card-block__title">Color variants</h3>
                <p>Optional color variants can be added using modifier classes</p>

                <div class="row">
                    <div class="col-md-6">
                        <div class="input-slider input-slider--blue"></div>

                        <br/>

                        <div class="input-slider input-slider--red"></div>

                        <br/>
                    </div>

                    <div class="col-md-6">
                        <div class="input-slider input-slider--amber"></div>

                        <br/>

                        <div class="input-slider input-slider--green"></div>

                        <br/>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <h2 class="card-title">Button Checkboxes and Radios</h2>
                <small class="card-subtitle">Control button states or create groups of buttons for more components like toolbars.</small>
            </div>

            <div class="card-block">
                <h3 class="card-block__title">Toggle states</h3>
                <p>Add <code>data-toggle=&#34;button&#34;</code> to toggle a button’s <code>active</code> state. If you’re pre-toggling a button, you must manually add the <code>.active</code> class and <code>aria-pressed=&#34;true&#34;</code> to the &lt;button&gt;.</p>

                <br/>

                <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
                    Single toggle
                </button>

                <br/>
                <br/>
                <br/>

                <h3 class="card-block__title">Checkbox and radio buttons</h3>
                <p>Bootstrap’s <code>.button</code> styles can be applied to other elements, such as &lt;label&gt;s, to provide checkbox or radio style button toggling.</p>

                <br/>

                <div class="btn-group" data-toggle="buttons">
                    <label class="btn active">
                        <input type="checkbox" checked="" autocomplete="off"/> Checkbox 1 (pre-checked)
                    </label>
                    <label class="btn">
                        <input type="checkbox" autocomplete="off"/> Checkbox 2
                    </label>
                    <label class="btn">
                        <input type="checkbox" autocomplete="off"/> Checkbox 3
                    </label>
                </div>

                <br/>

                <div class="btn-group" data-toggle="buttons">
                    <label class="btn active">
                        <input type="radio" name="options" id="option1" autocomplete="off" checked=""/> Radio 1 (preselected)
                    </label>
                    <label class="btn">
                        <input type="radio" name="options" id="option2" autocomplete="off"/> Radio 2
                    </label>
                    <label class="btn">
                        <input type="radio" name="options" id="option3" autocomplete="off"/> Radio 3
                    </label>
                </div>

                <br/>
                <br/>

                <div class="btn-group btn-group--colors" data-toggle="buttons">
                    <label class="btn"><input type="checkbox" autocomplete="off" checked=""/></label>
                    <label class="btn bg-light-blue"><input type="checkbox" autocomplete="off"/></label>
                    <label class="btn bg-teal"><input type="checkbox" autocomplete="off"/></label>
                    <label class="btn bg-red"><input type="checkbox" autocomplete="off"/></label>
                    <label class="btn bg-purple active"><input type="checkbox" autocomplete="off"/></label>
                    <label class="btn bg-amber"><input type="checkbox" autocomplete="off"/></label>
                    <label class="btn bg-cyan"><input type="checkbox" autocomplete="off"/></label>
                </div>

                <br/>

                <div class="btn-group btn-group--colors" data-toggle="buttons">
                    <label class="btn"><input type="radio" name="notes-color" autocomplete="off" checked=""/></label>
                    <label class="btn bg-light-blue"><input type="radio" name="notes-color" autocomplete="off"/></label>
                    <label class="btn bg-teal active"><input type="radio" name="notes-color" autocomplete="off"/></label>
                    <label class="btn bg-red"><input type="radio" name="notes-color" autocomplete="off"/></label>
                    <label class="btn bg-purple"><input type="radio" name="notes-color" autocomplete="off"/></label>
                    <label class="btn bg-amber"><input type="radio" name="notes-color" autocomplete="off"/></label>
                    <label class="btn bg-cyan"><input type="radio" name="notes-color" autocomplete="off"/></label>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <h2 class="card-title">Custom Checkboxes</h2>
                <small class="card-subtitle">Custom rounded checkboxes with alphabet characters to use in contacts and related lists</small>
            </div>

            <div class="card-block">
                <div class="demo-inline-wrapper">
                    <label class="custom-control custom-control--char">
                        <input class="custom-control-input" type="checkbox"/>
                        <span class="custom-control--char__helper"><i class="bg-cyan">A</i></span>
                    </label>
                </div>

                <div class="demo-inline-wrapper">
                    <label class="custom-control custom-control--char">
                        <input class="custom-control-input" type="checkbox"/>
                        <span class="custom-control--char__helper"><i class="bg-red">C</i></span>
                    </label>
                </div>

                <div class="demo-inline-wrapper">
                    <label class="custom-control custom-control--char">
                        <input class="custom-control-input" type="checkbox"/>
                        <span class="custom-control--char__helper"><i class="bg-blue">V</i></span>
                    </label>
                </div>

                <div class="demo-inline-wrapper">
                    <label class="custom-control custom-control--char">
                        <input class="custom-control-input" type="checkbox"/>
                        <span class="custom-control--char__helper"><i class="bg-purple">Z</i></span>
                    </label>
                </div>

                <div class="demo-inline-wrapper">
                    <label class="custom-control custom-control--char">
                        <input class="custom-control-input" type="checkbox"/>
                        <span class="custom-control--char__helper"><i class="bg-amber">X</i></span>
                    </label>
                </div>

                <div class="demo-inline-wrapper">
                    <label class="custom-control custom-control--char">
                        <input class="custom-control-input" type="checkbox"/>
                        <span class="custom-control--char__helper"><i class="bg-teal">S</i></span>
                    </label>
                </div>

                <br/>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <h2 class="card-title">WYSIWYG Editor</h2>
                <small class="card-subtitle">Trumbowyg is Light, translatable and customisable jQuery plugin. Beautiful design, generates semantic code, comes with a powerful API.</small>
            </div>

            <div class="card-block">
                <div class="wysiwyg-editor"></div>
            </div>
        </div>
    </div>

    
</div>
</template>
<script type="text/javascript">
let select2 = require('select2')
let Dropzone = require('dropzone')
let trumbowyg = require('trumbowyg')
let noUiSlider = require('nouislider')
let colorpicker = require('bootstrap-colorpicker')
import "dropzone/dist/dropzone.css"
import "select2/dist/css/select2.css"
import "trumbowyg/dist/ui/trumbowyg.css"
import "nouislider/distribute/nouislider.css"
import "bootstrap-colorpicker/dist/css/bootstrap-colorpicker.css"
export default{
    mounted() {
        $("#dropzone-upload")[0] && (Dropzone.autoDiscover = !1), $(document).ready(function() {
                if ($(".btn")[0], $("#data-table")[0]) {
                    $("#data-table").DataTable({
                        autoWidth: !1,
                        responsive: !0,
                        lengthMenu: [
                            [15, 30, 45, -1],
                            ["15 Rows", "30 Rows", "45 Rows", "Everything"]
                        ],
                        language: {
                            searchPlaceholder: "Search for records..."
                        },
                        dom: "Blfrtip",
                        buttons: [{
                            extend: "excelHtml5",
                            title: "Export Data"
                        }, {
                            extend: "csvHtml5",
                            title: "Export Data"
                        }, {
                            extend: "print",
                            title: "Material Admin"
                        }],
                        initComplete: function(a, b) {
                            $(this).closest(".dataTables_wrapper").prepend('<div class="dataTables_buttons hidden-sm-down actions"><span class="actions__item zmdi zmdi-print" data-table-action="print" /><span class="actions__item zmdi zmdi-fullscreen" data-table-action="fullscreen" /><div class="dropdown actions__item"><i data-toggle="dropdown" class="zmdi zmdi-download" /><ul class="dropdown-menu dropdown-menu-right"><a href="" class="dropdown-item" data-table-action="excel">Excel (.xlsx)</a><a href="" class="dropdown-item" data-table-action="csv">CSV (.csv)</a></ul></div></div>')
                        }
                    }), $(".dataTables_filter input[type=search]").focus(function() {
                        $(this).closest(".dataTables_filter").addClass("dataTables_filter--toggled")
                    }), $(".dataTables_filter input[type=search]").blur(function() {
                        $(this).closest(".dataTables_filter").removeClass("dataTables_filter--toggled")
                    }), $("body").on("click", "[data-table-action]", function(a) {
                        a.preventDefault();
                        var b = $(this).data("table-action");
                        if ("excel" === b && $(this).closest(".dataTables_wrapper").find(".buttons-excel").trigger("click"), "csv" === b && $(this).closest(".dataTables_wrapper").find(".buttons-csv").trigger("click"), "print" === b && $(this).closest(".dataTables_wrapper").find(".buttons-print").trigger("click"), "fullscreen" === b) {
                            var c = $(this).closest(".card");
                            c.hasClass("card--fullscreen") ? (c.removeClass("card--fullscreen"), $("body").removeClass("data-table-toggled")) : (c.addClass("card--fullscreen"), $("body").addClass("data-table-toggled"))
                        }
                    })
                }
                if ($(".textarea-autosize")[0] && autosize($(".textarea-autosize")), $("input-mask")[0] && $(".input-mask").mask(), $("select.select2")[0]) {
                    var a = $(".select2-parent")[0] ? $(".select2-parent") : $("body");
                    $("select.select2").select2({
                        dropdownAutoWidth: !0,
                        width: "100%",
                        dropdownParent: a
                    })
                }
                
                if ($("#dropzone-upload")[0] && $("#dropzone-upload").dropzone({
                    url: "/file/post",
                    addRemoveLinks: !0
                })
                    , $(".datetime-picker")[0] && $(".datetime-picker").flatpickr({
                    enableTime: !0,
                    nextArrow: '<i class="zmdi zmdi-long-arrow-right" />',
                    prevArrow: '<i class="zmdi zmdi-long-arrow-left" />'
                }), $(".date-picker")[0] && $(".date-picker").flatpickr({
                    enableTime: !1,
                    nextArrow: '<i class="zmdi zmdi-long-arrow-right" />',
                    prevArrow: '<i class="zmdi zmdi-long-arrow-left" />'
                }), $(".time-picker")[0] && $(".time-picker").flatpickr({
                    noCalendar: !0,
                    enableTime: !0
                }), $("#input-slider")[0]
                ) {
                    var b = document.getElementById("input-slider");
                    noUiSlider.create(b, {
                        start: [20],
                        connect: "lower",
                        range: {
                            min: 0,
                            max: 100
                        }
                    }), b.noUiSlider.on("update", function(a, b) {
                        document.getElementById("input-slider-value").value = a[b]
                    })
                }

                if ($("#input-slider-range")[0]) {
                    var c = document.getElementById("input-slider-range"),
                        d = document.getElementById("input-slider-range-value-1"),
                        e = document.getElementById("input-slider-range-value-2"),
                        f = [d, e];
                    noUiSlider.create(c, {
                        start: [20, 80],
                        connect: !0,
                        range: {
                            min: 0,
                            max: 100
                        }
                    }), c.noUiSlider.on("update", function(a, b) {
                        f[b].value = a[b]
                    })
                }
                if ($(".input-slider")[0]) for (var g = document.getElementsByClassName("input-slider"), h = 0; h < g.length; h++) noUiSlider.create(g[h], {
                    start: [20],
                    connect: "lower",
                    range: {
                        min: 0,
                        max: 100
                    }
                });
                if ($(".color-picker")[0] && ($(this).each(function() {
                    var a = $(this).find(".color-picker__value").data("horizontal") || !1;
                    $(this).find(".color-picker__value").colorpicker({
                        customClass: 'colorpicker-2x',
                        horizontal: a
                    })
                }),
                 $("body").on("change", ".color-picker__value", function() {
                    $(this).closest(".color-picker").find(".color-picker__preview").css("backgroundColor", $(this).val())
                })), $(".wysiwyg-editor")[0] && $(".wysiwyg-editor").trumbowyg({
                    autogrow: !0,
                    btns: [
                        ["viewHTML"],
                        ["formatting"],
                        ["link"],
                        ["insertImage"], "btnGrp-justify", "btnGrp-lists", ["horizontalRule"],
                        ["removeformat"],
                        ["fullscreen"]
                    ]
                }), $(".lightbox")[0] && $(".lightbox").lightGallery({
                    enableTouch: !0
                }), $('[data-toggle="popover"]')[0] && $('[data-toggle="popover"]').popover(), $('[data-toggle="tooltip"]')[0] && $('[data-toggle="tooltip"]').tooltip(), $(".widget-calendar__body")[0]) {
                    $(".widget-calendar__body").fullCalendar({
                        contentHeight: "auto",
                        theme: !1,
                        buttonIcons: {
                            prev: " zmdi zmdi-long-arrow-left",
                            next: " zmdi zmdi-long-arrow-right"
                        },
                        header: {
                            right: "next",
                            center: "title, ",
                            left: "prev"
                        },
                        defaultDate: "2016-08-12",
                        editable: !0,
                        events: [{
                            title: "Dolor Pellentesque",
                            start: "2016-08-01",
                            className: "bg-cyan"
                        }, {
                            title: "Purus Nibh",
                            start: "2016-08-07",
                            className: "bg-amber"
                        }, {
                            title: "Amet Condimentum",
                            start: "2016-08-09",
                            className: "bg-green"
                        }, {
                            title: "Tellus",
                            start: "2016-08-12",
                            className: "bg-blue"
                        }, {
                            title: "Vestibulum",
                            start: "2016-08-18",
                            className: "bg-cyan"
                        }, {
                            title: "Ipsum",
                            start: "2016-08-24",
                            className: "bg-teal"
                        }, {
                            title: "Fringilla Sit",
                            start: "2016-08-27",
                            className: "bg-blue"
                        }, {
                            title: "Amet Pharetra",
                            url: "http://google.com/",
                            start: "2016-08-30",
                            className: "bg-amber"
                        }]
                    });
                    var i = moment().format("YYYY"),
                        j = moment().format("dddd, MMM D");
                    $(".widget-calendar__year").html(i), $(".widget-calendar__day").html(j)
                }
                if ($(".notes__body")[0]) {
                    var k;
                    $(".notes__body").each(function(a, b) {
                        k = $(this).prev().is(".notes__title") ? 4 : 6, $clamp(b, {
                            clamp: k
                        })
                    })
                }
                $(".scrollbar-inner")[0] && $(".scrollbar-inner").scrollbar().scrollLock()
            });

    }
}
</script>
<style>
</style>

